<template>
  <div>
    <!-- 导航 -->
    <!-- <div class="nav">
      <van-icon
        class="goback"
        name="arrow-left"
        color="#999"
        @click="goBake"
      />
      <div
        class="author-name-scroll"
        v-if="scrollTop"
      >
        <img :src="detailList.aut_photo">
        {{ detailList.aut_name }}
        <span class="line"> | </span>
        <span class="attention">+关注</span>
      </div>
      <van-icon
        class="set"
        name="ellipsis"
        size="20"
      />
    </div> -->

    <!-- 导航 利用插槽 -->
    <nav-bar v-if="!show">
      <van-icon
        name="ellipsis"
        color="#999"
        size="18"
      />
      <template #title>
        <div
          class="awatar-contanier"
          v-if="flag"
        >
          <div class="avatar">
            <img :src="detailList.aut_photo">
          </div>
          <span class="user-mini">{{ detailList.aut_name }}</span>
          <span
            class="attention-mini"
            @click="onFollow"
          >
            +关注
          </span>
        </div>
      </template>
    </nav-bar>


    <div
      ref="aa"
      class="wrapper"
      @mousewheel="onScroll"
    >
      <!-- 内容区域-->
      <div class="detail">
        <!-- 标题 -->
        <h3>{{ detailList.title }}</h3>
        <div class="bottom">
          <span>{{ getTime(detailList.pubdate) }} |</span>
          <span> {{ detailList.read_count }} 阅读 | </span>
          <span> {{ detailList.comm_count }} 评论</span>
        </div>
        <!-- 作者区域 -->
        <div
          ref="header"
          class="author"
        >
          <div class="author-name">
            <img :src="detailList.aut_photo">
            {{ detailList.aut_name }}
          </div>
          <div
            class="attention-btn"
            @click="onFollow"
          >
            +关注
          </div>
        </div>
        <!-- 文章信息 -->
        <div class="article">
          <div
            v-html="detailList.content"
            class="article-word"
          />
          <div class="release">发布文章时间 {{ getTime(detailList.pubdate) }}</div>
        </div>
      </div>
      <!-- 评论区域 -->
      <div class="comments-wrapper">
        <van-sticky
          :offset-top="46"
          v-if="!show"
        >
          <div
            class="comments-title"
          >
            <div class="comments-all">全部评论({{ detailList.comm_count }})</div>
            <div class="like">{{ detailList.like_count }}点赞</div>
          </div>
        </van-sticky>

        <div
          class="comments-detail"
          v-for="(item, i) in commentsList"
          :key="i"
        >
          <div class="reviewers">
            <div class="reviewers-content">
              <img :src="item.aut_photo">
              {{ item.aut_name }}
            </div>
            <!-- <div><van-icon name="good-job-o" /></div> -->
            <div class="like">
              {{ item.like_count }}
              <!--
                点赞等于0 显示thumb-circle-o
                点赞大于0 显示good-job-o
                自己点赞 高亮good-job-o
              -->
              <van-icon
                :name="item.like_count ? 'good-job-o' : 'thumb-circle-o'"
                :color="item.is_liking ? '#fc662c' : undefined"
              />
            </div>
          </div>
          <div class="comments-content">{{ item.content }}</div>
          <div class="reply">
            <button
              class="comments-btn"
              @click="onCommentView(item.com_id)"
            >
              回复 >
            </button>
            <span>{{ getCommentsTime(item.pubdate) }}</span>
          </div>
        </div>
        <van-empty
          description="还没有人评论~~"
          v-if="!commentsList.length"
        />
      </div>
    </div>


    <!-- 脚步信息-->
    <div class="footer">
      <van-goods-action>
        <div
          class="btn"
          @click="showPopup"
        >
          <van-icon name="edit" />抢沙发...
        </div>
        <van-popup
          v-model="show"
          closeable
          close-icon="arrow-left"
          close-icon-position="top-left"
          position="bottom"
          :style="{ height: '100%' }"
        >
          <van-nav-bar :title="commentTitle">
            <template #right>
              <span
                class="published"
                @click="onPublished"
              > 发表</span>
            </template>
          </van-nav-bar>
          <div class="comments-textarea">
            <van-field
              class="textarea"
              v-model="message"
              autosize
              type="textarea"
              placeholder="说点什么~"
              show-word-limit
            />
          </div>
        </van-popup>
        <van-goods-action-icon
          icon="chat-o"
          text="评论"
          :badge="detailList.comm_count != 0 ? detailList.comm_count : ''"
        />
        <van-goods-action-icon
          :icon="detailList.attitude === 1? 'good-job' : 'good-job-o'"
          :badge="detailList.like_count != 0 ? detailList.like_count: ''"
          text="点赞"
          :color="detailList.attitude === 1 ? 'red' : ''"
          @click="onLike"
        />
        <van-goods-action-icon
          :icon="detailList.is_collected ? 'like' : 'like-o' "
          text="收藏"
          :color="detailList.is_collected ? 'red' : ''"
          @click="onCollect"
        />
        <van-goods-action-icon
          icon="share-o"
          text="分享"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import {
  mapState,
  mapActions,
} from 'vuex';

import moment from 'moment';
import * as userApi from '@/api/users'
import { Toast } from 'vant';

let h = 0;
export default {
  name: 'DetailPage',
  data() {
    return {
      flag: false,
      show: false,
      message: '',
      commentTitle: '',
      commentId: 0,
    };
  },
  computed: {
    ...mapState('article', [
      'detailList',
    ]),
    ...mapState('article', [
      'commentsList',
    ]),
  },
  methods: {
    // 对文章评论
    showPopup() {
      this.show = true;
      this.commentTitle = '评论文章';
      this.commentId = this.detailList.art_id;
    },
    // 对评论进行回复
    onCommentView(id) {
      this.show = true;
      this.commentTitle = '回复评论';
      this.commentId = id;
    },

    ...mapActions('article', [
      'updateDetailsList'
    ]),
    ...mapActions('article', [
      'updateCommentsList'
    ]),

    getTime(time) {
      return moment(time).format('LL')
    },
    getCommentsTime(time) {
      return moment(time).fromNow()
    },
    onScroll() {
      // if (this.$refs.aa.scrollTop >= 90) {
      //   this.scrollTop = true;
      // } else {
      //   this.scrollTop = false;
      // }
      this.flag = this.$refs.aa.scrollTop > h
    },
    onFollow () {
      userApi.follow (this.detailList.aut_id)
        .then(msg => {
          this.$notify({
            message: msg,
            type: 'success',
          });
        })
        .catch((msg) => {
          this.$notify({
            message: msg,
          });
        })
    },
    // 发表评论
    onPublished() {
      userApi.comments({
        target: this.commentId,
        content: this.message,
        art_id: this.detailList.art_id
      })
        .then(msg => {
          Toast.success('评论成功');
          this.message = '';
          this.show = false;
          this.updateCommentsList(this.detailList.art_id);
        })
        .catch((msg) => {
          this.$notify({
            message: msg,
          });
        })
    },
    // 点赞
    onLike() {
      if (this.detailList.attitude !== 1) {
        userApi.like({
          target: this.detailList.art_id,
        })
          .then(msg => {
            Toast.success('点赞成功');
            this.updateCommentsList(this.detailList.art_id);
            this.detailList.attitude = 1;
          })
          .catch((msg) => {
            this.$notify({
              message: msg,
            });
          })
      } else {
        userApi.deleteLike(this.detailList.art_id)
          .then(msg => {
            Toast.success('取消点赞成功');
            this.updateCommentsList(this.detailList.art_id);
            this.detailList.attitude = -1;
          })
          .catch((msg) => {
            this.$notify({
              message: msg,
            });
          })
      }
    },
    // 收藏
    onCollect() {
      if (!this.detailList.is_collected) {
        userApi.collections({
          target: this.detailList.art_id,
        })
          .then(msg => {
            Toast.success('收藏成功');
            this.updateCommentsList(this.detailList.art_id);
            this.detailList.is_collected = true;
          })
          .catch((msg) => {
            this.$notify({
              message: msg,
            });
          })
      } else {
        userApi.deleteCollections(this.detailList.art_id)
          .then(msg => {
            Toast.success('取消收藏成功');
            this.updateCommentsList(this.detailList.art_id);
            this.detailList.is_collected = false;
          })
          .catch((msg) => {
            this.$notify({
              message: msg,
            });
          })
      }
    },
    // 分享
    onShare() {
    },

  },
  async created() {
    // const id = this.$route.params.id; //用params传参方式
    const id = this.$route.query.id;
    this.updateCommentsList(id);
    await this.updateDetailsList(id);
    this.$nextTick(() => {
      const { clientHeight, offsetTop } = this.$refs.header;
      h = clientHeight + offsetTop;
    })
  }
}
</script>
<style src="highlight.js/styles/dark.css"></style>
<style lang="less" scoped>
@import url('@/assets/style/comments.less');
@import url('@/assets/style/common.less');
.comments-textarea {
  padding: 16px 16px;
}
.textarea {
  background-color: #f7f8fa;
  border-radius: 8px ;
}
.published{
  color: #fc6627;
}
::v-deep .van-popup__close-icon {
  font-size: 16px;
}
.awatar-contanier {
  margin-left: 16px;
  display: flex;
  .attention-mini {
    color: #fc6627;
    font-size: 14px;
    &::before {
      content: '';
      display: inline-block;
      width: 1px;
      height: 10px;
      background-color: #aaa;
      margin-right: 6px;
    }
  }


   span {
    padding: 0 8px;
  }
}
.avatar{
  .avatar(10px);
}
</style>
